<template class="bodyBg">
	<!-- 导航 -->
	<TopNavBar></TopNavBar>
	
	<!-- 内容 -->
		<el-row class="gu-bg">
			<el-col :span="20" :offset="2">
				<el-row :gutter="20">
					<!-- 博客 -->
					<el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
						<ArticleLists></ArticleLists>
					</el-col>
					<!-- 右侧栏 -->
					<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
						<!-- 个人信息展示 -->
						<InfoShow></InfoShow>
						<!-- 分类 暂时不写 -->
						<!-- <Classification></Classification> -->
						<!-- 标签 -->
						<LabelCar></LabelCar>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
	
	<!-- 底部 -->
	<el-row>
		<Footer></Footer>
	</el-row>
	
</template>

<script>
	import TopNavBar from '../components/layout/TopNavBar.vue'
	import InfoShow from '../components/layout/InfoShow.vue'
	import Classification from '../components/layout/Classification.vue'
	import LabelCar from '../components/layout/LabelCar.vue'
	import Footer from '../components/layout/Footer.vue'
	import ArticleLists from '../components/article/label.vue'
	export default {
		name: "classify",
		components: {
			TopNavBar,
			InfoShow,
			Classification,
			ArticleLists,
			LabelCar,
			Footer
		},
		data() {
			return {
				scrollTop: 0, //滚轮滚动
			}
		},
		mounted() {
			window.addEventListener('scroll', this.handleScroll, true); // 监听（绑定）滚轮滚动事件
		},
		methods: {
			/* 滚动条监听事件处理 */
			handleScroll(e) {
				let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				this.scrollTop = scrollTop;
			}
		},
		destroyed() {
			document.removeEventListener('scroll', this.handleScroll); //取消监听滚轮滚动事件
		}
	}
</script>

<style scoped>
	

	.text1 {
		margin-top: 10px;
		width: 100%;
		height: 300px;
		background-color: #a1505c
	}

	.text2 {
		margin-top: 10px;
		width: 100%;
		height: 300px;
		background-color: #6950a1
	}

	.text3 {
		margin-top: 10px;
		width: 100%;
		height: 300px;
		background-color: #a16350
	}

	.text4 {
		margin-top: 10px;
		width: 100%;
		height: 300px;
		background-color: #101010
	}
</style>
